<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="vue.js"></script>
    <script src="vuex.js"></script>
    <title>vue</title>
</head>
<style>
    table{
        border-collapse: collapse;
    }

</style>
<body>
    <div id="app">
        <lists></lists>
        <footer-cart></footer-cart>
    </div>
    <!--构建模板-->
    <script type="text/x-template" id="lists">
        <div>
            <h1 v-if="goods.length==0">购物车为空</h1>
            <div v-if="goods.length>0">
                <div>
                    <table border="1px" width="60%">
                        <tr>
                            <th>编号</th>
                            <th>名称</th>
                            <th>价格</th>
                            <th>数量</th>
                            <th>总计</th>
                            <th>操作</th>
                        </tr>
                        <tr v-for="v in goods">
                            <td>{{v.id}}</td>
                            <td>{{v.title}}</td>
                            <td>{{v.price}}</td>
                            <td>
                                <input type="text" v-model="v.num">
                            </td>
                            <td>{{v.totalPrice}}</td>
                            <td><button @click="del(v.id)">删除</button></td>
                        </tr>
                    </table>
                    <!--<h1>总价：{{totalPrice}}</h1>-->
                </div>
            </div>
        </div>
    </script>

    <script type="text/x-template" id="footerCart">
        <div v-if="totalPrice>0">
          <div>
              总价：{{totalPrice}}
          </div>
        </div>
    </script>

</body>
<script>
    let store=new Vuex.Store({
        state:{
            totalPrice:100,
            goods:[
                {id:1,title:'iphone7',price:399,num:3},
                {id:2,title:'iphone8',price:1888,num:2}
            ]
        },
         getters:{
            totalPrice:state=>{
                let totalPrice=0;
                state.goods.forEach((v)=>{
                    totalPrice+=v.num*v.price;
                });
                return totalPrice;
            },
             goods(state){
                let goods=state.goods;
                 goods.forEach((v)=>{
                    v.totalPrice=v.num*v.price;
                 });
                 return goods;
             }
         },
        mutations:{
            //删除购物车
            del(state,param){
                let k;
                for(let i=0;i<state.goods.length;i++){
                    if (state.goods[i].id==param.id){
                        k=i;
                        break;
                    }
                }
                state.goods.splice(k,1);
            }
        }

    });
    let lists={
        template:'#lists',
        computed:{
            totalPrice(){
                return this.$store.getters.totalPrice;
            },
            goods(){
                return this.$store.getters.goods;
            }
        },
        methods:{
            del(id){
              /*  alert('删除 id ='+id);*/
              this.$store.commit('del',{
                  id
              })
            }
        }
    };

    let footerCart={
        template:'#footerCart',
        computed:{
            totalPrice(){
                return this.$store.getters.totalPrice;
            }
        }
    };

        var app=new Vue({
           el:'#app',
            store,
            components:{
               lists,footerCart
            }

        });


</script>
</html>